<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 600px;
            display: block;
        }
        button {
            outline: none;
            border: 0;
            background-color: red;
            cursor: pointer;
            color: #ffffff;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <button id="one">图片一</button>
    <button id="two">图片二</button>
    <button class="there">图片三</button>
    <button id="four">图片四</button>
    <img src="./images/1.jpg" title="图片1">
    <button id ="five">隐藏</button>
    <button id ="six">显示</button>

    <script>
        var one1 = document.getElementById('one');
        var two2 = document.getElementById('two');
        var there3 = document.querySelector('.there');
        var four4 = document.getElementById('four');
        var imgs = document.querySelector('img');
        var five5 = document.getElementById('five');
        var six = document.getElementById('six');
        one1.onclick = function (){
            imgs.src = './images/1.jpg';
            imgs.title = '图片1'
        }
        two2.onclick = function (){
            imgs.src = './images/2.jpg';
            imgs.title = '图片2'
        }
        there3.onclick = function (){
            imgs.src = './images/3.jpg';
            imgs.title = '图片3'
        }
        four4.onclick = function (){
            imgs.src = './images/4.jpg';
            imgs.title = '图片4'
        }
        five5.onclick = function (){
            one1.innerHTML = '2020/08/30'
            imgs.style.display = 'none';
        }
        six.onclick = function (){
            imgs.style.display = 'block';
            six.style.backgroundColor = 'black'
        }
    </script>
</body>
</html>